<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bilibili</title>
  <link rel="stylesheet" href="./iconfont/iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="left">
      <img src="./assets/image.png" alt="">
    </div>
    <div class="right">
      <!-- <a href="#"><span class="iconfont icon-sousuo"></span></a> -->
      <a href="#"><span class="iconfont icon-sousuo"></span></a>
      <a href="#" class="btn">下载 App</a>
    </div>
  </header>
  <!-- 分类 -->
  <div class="category">
    <div><a href="#">首页</a></div>
    <div><a href="#">动画</a></div>
    <div><a href="#">番剧</a></div>
    <div><a href="#">舞蹈</a></div>
    <div><a href="#">国创</a></div>
    <div><a href="#">音乐</a></div>
    <div><a href="#">音乐</a></div>
    <div><a href="#">音乐</a></div>
    <div><a href="#">音乐</a></div>

    <!-- right-icon -->
    <p class="right-icon">
      <span class="iconfont icon-xiajiantou"></span>
    </p>
  </div>
  <!-- 内容区 -->
  <div class="content">
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
    <div class="card">
      <!-- 背景图片 -->
      <div class="pic">
        <div class="father">
          <div class="left">
            <span class="iconfont icon-bofang"></span>
            <span> 104.7万</span>
          </div>
          <div class="right">
            <span class="iconfont icon-liebiao"></span>
            <span> 2813</span>
          </div>
        </div>

      </div>
      <!-- 下方文字 -->
      <div class="btm-txt">
        怎么样的成就才能配得上,这一路的颠沛流离
      </div>
    </div>
  </div>
  <!-- 底部 -->

  <div class="end-footer">
    <p>信息网络传播视听节目许可证：0910417</p>
    <p>网络文化经营许可证 沪网文【2019】3804-274号</p>
    <p>广播电视节目制作经营许可证：（沪）字第01248号</p>
    <p>增值电信业务经营许可证 沪B2-20100043</p>
  </div>
  <div class="end-txt">
    去bilibili App看更多
  </div>
  <!-- 安装，下载 -->
  <footer>
    <span class="iconfont icon-bilibili-copy"></span>
    <p>打开App，看你感兴趣的视频</p>
  </footer>
</body>

</html>